import React, { Component, Fragment } from 'react';
import { Card, Table, Tag, Space, Badge, Button, Modal, message } from 'antd';
import './table.less';
import Iaxios from './../../axios';
import './../../mocker/index.js';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
		width: 100,
		fixed: 'left',
    render: text => <span>{text}</span>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
		width: 60,
		fixed: 'left'
  },
	{
	  title: '性别',
	  dataIndex: 'sex',
	  key: 'sex',
		render: ress=>{
			return ress === 1 ? "男": "女"
		}
	},
	{
	  title: '状态',
	  dataIndex: 'sta',
	  key: 'sta',
		render: res=>{
			let config ={
				"1": "状态1",
				"2": "状态2",
				"3": "状态3",
				"4": "状态4",
				"5": "状态5"
			}
			return config[res];
		}
	},
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
	{
	  title: 'Address',
	  dataIndex: 'address',
	  key: 'address',
	},
	{
	  title: 'Address',
	  dataIndex: 'address',
	  key: 'address',
	},
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: tags => (
      <>
        {tags.map(tag => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
		fixed: 'right',
    render: (text, record) => (
      <Space size="middle">
        <span>Invite {record.name}</span>
        <span>Delete</span>
      </Space>
    ),
  },
];
	

class BasicTable extends Component {
	state = {
		data: []
	}
	componentDidMount(){
		this.request()
	}
	request = ()=>{
		Iaxios.ajax({
			url: "/test2",
			method: 'post',
		}).then((res)=>{
			console.log(res);
			if(res.code === 0){
				this.setState({
					data: res.result.list,
				})
			}else{
				console.log('-------查查什么错-------');
			}
		})
	}
	handleChange = (pagination,filters,sorter)=>{
		console.log(sorter);
		this.setState({
			sortOrder: sorter.order
		})
	}
	handleDelete = (item)=>{
		console.log(item);
		let id = item.key;
		Modal.confirm({
			title: "确认",
			content: `您将要删除${id}`,
			onOk:()=>{
				message.success('删除成功');
				this.request();
			}
		})
	}
	render(){
		const columns2 = [
		  {
		    title: 'Name',
		    dataIndex: 'name',
		    key: 'name',
		    render: text => <span>{text}</span>
		  },
		  {
		    title: 'Age',
		    dataIndex: 'age',
		    key: 'age',
				sorter:(a,b)=>{
					return a.age - b.age
				},
				sortOrder: this.state.sortOrder,//指定升序或降序
		  },
			{
			  title: '性别',
			  dataIndex: 'sex',
			  key: 'sex',
				render: ress=>{
					return ress === 1 ? "男": "女"
				}
			},
			{
			  title: '状态',
			  dataIndex: 'sta',
			  key: 'sta',
				render: res=>{
					let config ={
						"1": <Badge status="success" text="游泳" />,
						"2": <Badge status="error" text="打球" />,
						"3": <Badge status="default" text="累了" />,
						"4": "状态4",
						"5": "状态5"
					}
					return config[res];
				}
			},
		  {
		    title: 'Address',
		    dataIndex: 'address',
		    key: 'address',
		  },
		  {
		    title: 'Tags',
		    key: 'tags',
		    dataIndex: 'tags',
		    render: tags => (
		      <>
		        {tags.map(tag => {
		          let color = tag.length > 5 ? 'geekblue' : 'green';
		          if (tag === 'loser') {
		            color = 'volcano';
		          }
		          return (
		            <Tag color={color} key={tag}>
		              {tag.toUpperCase()}
		            </Tag>
		          );
		        })}
		      </>
		    ),
		  },
		  {
		    title: '操作',
		    key: 'action',
		    render: (text, record) => (
		      <Space size="middle">
		        <Button size="small">编辑{record.name}</Button>
		        <Button size="small" onClick={()=>this.handleDelete(record)}>Delete</Button>
		      </Space>
		    ),
		  },
		];
		return (
			<Fragment>
				<Card title="头部或两侧固定" className="card-wrap">
					<Table 
					columns={columns} 
					dataSource={this.state.data}
					scroll={{y: 240}}
					/>
				</Card>
				<Card title="表格年龄排序" className="card-wrap">
					<Table
					  columns={columns2}
						dataSource={this.state.data}
						onChange={this.handleChange}
					/>
				</Card>
				<Card title="表格加操作按钮" className="card-wrap">
					<Table
					  columns={columns2}
						dataSource={this.state.data}
					/>
				</Card>
			</Fragment>
		)
	}
}

export default BasicTable;